<!DOCTYPE html>
<html lang="en"><!-- Mirrored from localhost:8080/PET_STOREMVC0702_war_exploded/dogsDetails.action?petdetail=358 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 02 Nov 2024 09:42:02 GMT --><!-- Added by HTTrack --><head><meta http-equiv="content-type" content="text/html;charset=UTF-8"><!-- /Added by HTTrack -->

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新青年宠物销售平台</title>
    



<link href="style/bootstrap.css" rel="stylesheet">
<link href="style/gsdk.css" rel="stylesheet">
<link href="style/demo.css" rel="stylesheet">
<link href="style/cooriku.css" rel="stylesheet">
<link href="style/font-awesome.css" rel="stylesheet">
<link rel="shortcut icon" href="icon.ico" type="image/x-icon">

    <style>
        body, html{
            background-color: rgb(0, 0, 0, 0.05);
            position: absolute;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        dt, dd, dl{
            margin: 0;
            padding: 0;
        }
        dt, dd{
            font-weight: 500;
            display: inline-block;
        }
        button {
            cursor: pointer;
        }
        textarea{
            width: 820px; height: 50px; resize: none
        }
        .confirm_btn{
            border: none;
            background: red;
            color: white;
            padding: 4px 10px;
        }
        #button_submit_div{
            text-align: right;
        }
        .time{
            padding: 0 10px;
            color: lightskyblue;
        }
        ul{
            list-style: none;
            padding: 0;
        }
        ul > li:hover{
            background: rgba(0, 0, 0, 0.1);
        }
        ul > li{
            padding: 10px 10px;
            border-bottom: solid 1px lightgray;
            display: block;
        }
        ul > li:last-child{
            border-bottom: none;
        }
        .cmt_img, .cmt_reply, .cmt_info{
            display: inline-block;
            vertical-align: middle;
        }

        .cmt_reply {
            float: right;
        }

        .cmt_reply_btn {
            border: none;
            display: none;
            margin-right: 10px;
            cursor: pointer;
        }

        .cmt_reply_checker {
            border: none;
            cursor: pointer;
        }

        .thumb_up:after {
            content: '\2764';
            font-family: "Segoe Fluent Icons", sans-serif;
            width: 40px;
            height: 40px;

            cursor: pointer;
            margin-left: 4px;
        }

        .avatar{
            display: block;
        }
        aside, main{
            background: white;
            vertical-align: top;
            margin-top: 50px;
            box-shadow: 2px 0 2px 0 lightgray;
            display: inline-block;
        }
        aside{
            margin-left: 20px;
            text-align: center;
            width: 300px;
        }
        main{
            padding: 20px;
            text-align: left;
            width: 900px;
        }
        .form_item{
            padding: 10px 0;
        }
        .menu > div{
            display: inline-block;
            padding: 10px 10px;
        }
        .menu > div:hover{
            background: rgba(0, 0, 0, 0.1);
            cursor: pointer;
        }
        .menu{
            margin: 0;
            padding: 0;
            background: white;
            position: absolute;
            width: 100%;
            text-align: center
        }

        textarea{
            border: solid 1px lightgray;
            border-radius: 3px;
        }

        textarea{
            padding: 10px;
            height: 60px;
        }

        a {
            color: dodgerblue;
        }

        .comment {
            padding: 0 0 0 30px;
            display: block; margin-top: 8px
        }
        .role_info {
            float: right;
        }
        .role_pic, .role_name {
            display: inline-block;
            margin-left: 5px;
        }

        .avatar {
            border-radius: 100%;
            vertical-align: top;
        }
        .role_input_box, .role_confirm_btn {
            display: inline-block;
        }
        .role_confirm_btn {
            height: inherit;
            border: none;
            width: 80px;
            background: red;
            color: white;
            border-top-right-radius: 2px;
            border-bottom-right-radius: 2px;
        }
        #commentator {
            border: none;
            outline-style: none;
            border-radius: 3px;
            height: inherit;
            width: 363px;
        }
        .fake_input_box {
            border: solid 1px lightgrey;
            border-right-style: none;
            width: 500px;
            padding: 0 0 0 3px;
            margin: 0;
            height: 50px;
            position: relative;
            border-radius: 3px;
        }

        .emoji_trigger_btn {
            border: none;
            background: none;
            font-size: 20px;
            vertical-align: bottom;
        }

        .emoji_board {
            display: none;
            position: absolute;
            top: 0;
            right: 105px;
            font-size: 25px;
            padding: 0 15px;
            background: lightgrey;
            border-radius: 3px;
        }

        .emoji_item {
            cursor: pointer;
        }

        .emoji_board:after {
            content: "";
            position: absolute;
            background-color: white;
            width: 0;
            height: 0;
            top: 4px;
            right: -20px;
            border-top: 10px solid transparent;
            border-left: 10px solid lightgrey;
            border-right: 10px solid transparent;
            border-bottom: 10px solid transparent;
        }


        dialog {
            border: 3px solid #4CAF50;
            padding: 20px;
            max-width: 80%;
            width: fit-content;
            box-shadow: 0 0 10px rgba(0,0,0,0.15);
            background-color: white;
            color: black;
            position: relative;
        }
        .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            cursor: pointer;
            font-size: 24px;
            color: #aaa;
        }
        .close-button:hover {
            color: red;
        }
    </style>
</head>
<body style="">





<div id="navbar-full">
    <div class="container">
        <nav class="navbar navbar-ct-blue navbar-fixed-top navbar-transparent" role="navigation">

            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="#">
                        <div class="logo-container">
                            <div class="logo">
                                <img src="img/logo-top1.png">
                            </div>
                            <div class="brand">
                                新青年宠物店
                            </div>
                        </div>
                    </a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">搜索宠物 <b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a class="dropdown-item" style="color: blue" th:href="@{/moredogs}">搜索狗狗</a></li>
                                <li><a class="dropdown-item" style="color: blue" th:href="@{/morecats}">搜索猫咪</a></li>
                            </ul>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">宠物词典<b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a class="dropdown-item" style="color: blue" th:href="@{/Havedogs}">狗狗的饲养方法</a></li>
                                <li><a class="dropdown-item" style="color: blue" th:href="@{/Havecats}">猫咪的饲养方法</a></li>
                            </ul>
                        </li>
                        <!-- 登录和注册按钮 -->
                        <li class="nav-item" th:if="${username == null}">
                            <button style="color: #4e498f;" name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search" th:onclick="|window.location.href='@{/login}'|">登录</button>
                        </li>
                        <li class="nav-item" th:if="${username == null}">
                            <button style="color: #4e498f;" name="pet-detail" class="btn btn-coo-blue btn-tooltip" role="button" data-toggle="tooltip" data-placement="right" title="" data-original-title="Let's search" th:onclick="|window.location.href='@{/zhuce}'|">注册</button>
                        </li>

                        <!-- 欢迎信息和退出登录按钮 -->
                        <li class="nav-item" th:if="${username != null}">
                            <a href="" class="nav-link dropdown-toggle" data-toggle="dropdown" role="button">欢迎您尊贵的<span th:text="${username}" class="nav-link nav-link dropdown-toggle" style="color: blue;"></span>新青年宠物店VIP贵宾，点我修改个人信息!<b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a class="dropdown-item"  style="color: blue" th:href="@{/upUser}">修改个人资料</a></li>
                                <li><a class="dropdown-item"  style="color: blue" th:href="@{/myLove}">我的喜爱</a></li>
                                <li><a class="dropdown-item"  style="color: blue" th:href="@{/userSubscribe}">我的预约</a></li>
                                <li><a class="dropdown-item" style="color: blue" th:href="@{/quituser}">退出登录</a></li>

                            </ul>
                        </li>
                    </ul>
                </div>


            </div>
        </nav>
    </div><!--  end container-->

    <div class="blurred-container">
        <div class="motto">
            <div>We</div>
            <div class="border">Love</div>
            <div>Pet</div>
        </div>

        <div class="img-src" style="background-image: url('img/service/top-service.jpg')"></div>
        <div class="img-src blur" style="background-image: url(&quot;img/service/top-service.jpg&quot;); opacity: 0;"></div>
    </div>
</div>
<div class="main">

    <nav>
        <ol itemscope="" itemtype="https://schema.org/BreadcrumbList" class="breadcrumb">
            <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
                <a itemprop="item" th:href="@{/index}">
                    <span itemprop="name">首页</span>
                </a>
                <meta itemprop="position" content="1">
            </li>
            <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="active">
                <a itemprop="item" th:href="@{/moredogs}">
                    <span itemprop="name">宠物搜索-狗狗</span>
                </a>
                <meta itemprop="position" content="2">
            </li>
            <li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem" class="active">
                <span itemprop="name" th:text="${dogdetails.name} + ' ' + ${dogdetails.queryNumber} "></span>
                <meta itemprop="position" content="2">
            </li>
        </ol>
    </nav>

    <div class="coo-title">
        <h1 class="coo-hd-tittle" th:text="${dogdetails.name} + ' ' + ${dogdetails.queryNumber}"></h1>
    </div>
    <div class="container tim-container">
        <div class="row">
            <div class="col-md-5">
                <img th:src="@{${dogdetails.imagePath}}" alt="${dogdetails.name} - ${dogdetails.queryNumber} image" class="img-rounded img-responsive">
                <div class="space-30"></div>
            </div>
            <div class="col-md-7">
                <table class="tbl-pet">
                    <thead>
                    </thead>
                    <tbody>
                    <tr>
                        <th class="coo-bg-lightgreen">状态</th>
                        <td th:class="${dogdetails.sub.equals('1') ? 'coo-bg-lightgreen' : 'coo-bg-lightred'}" th:text="${dogdetails.sub.equals('1') ? '已预约' : '未预约'}"></td>
                    </tr>
                    <tr>
                        <th>查询号码</th>
                        <td th:text="${dogdetails.queryNumber}"></td>
                    </tr>
                    <tr>
                        <th class="coo-bg-lightgreen">店铺</th>
                        <td class="coo-bg-lightgreen"><a th:href="@{/}" target="_blank">新青年宠物店</a></td>
                    </tr>
                    <tr>
                        <th>性别</th>
                        <td>女孩</td>
                    </tr>
                    <tr>
                        <th class="coo-bg-lightgreen">生日</th>
                        <td class="coo-bg-lightgreen" th:text="${#dates.format(dogdetails.birthday, 'yyyy-MM-dd')}"></td>
                    </tr>
                    <tr>
                        <th>毛色</th>
                        <td>白色</td>
                    </tr>
                    <tr>
                        <th class="coo-bg-lightgreen">出生地</th>
                        <td class="coo-bg-lightgreen">上海市</td>
                    </tr>
                    <tr>
                        <th>血统书</th>
                        <td>Yes</td>
                    </tr>
                    <tr class="pet-price">
                        <th class="coo-bg-lightgreen">宠物价格</th>
                        <td class="coo-bg-lightgreen"><span class="text-danger" th:text="${dogdetails.price}"></span></td>
                    </tr>
                    </tbody>
                </table>
                <div class="space-30"></div>
                <div class="text-center">
                    <button id="open-dialog" class="btn btn-lg btn-fill btn-coo-pink btn-tooltip" th:disabled="${dogdetails.sub.equals('1')}">预约时间</button>
                    <button th:onclick="'javascript:location.href=\'' + @{/addmylove} + '?petdetail=' + ${dogdetails.queryNumber} + '\''" class="btn btn-lg btn-fill btn-coo-pink btn-tooltip" data-toggle="tooltip" data-placement="top" title="Contact us">添加到我的喜欢</button>
                    <div class="space-30"></div>
                </div>
            </div>
        </div>

        <hr>

        <dialog id="myDialog">
            <h1>新青年宠物店温馨提示</h1>
            <p>欢迎您前来预约，预约成功后请按时进店验收，若超出时间将重新放回预约平台！</p>
            <form th:action="@{/addsub}" method="POST">
                <label for="appointment-time">选择您的预约时间:</label><br>
                <input type="text" name="pet_id" th:value="${dogdetails.queryNumber}" readonly>
                <input type="datetime-local" id="appointment-time" name="appointmentTime" required><br><br>
                <button type="submit"
                        class="btn btn-lg btn-fill btn-coo-pink btn-tooltip"
                        th:disabled="${dogdetails.sub.equals('1')}"
                        onclick="return handleButtonClick(this)">
                    点击预约
                </button>

            </form>

            <span class="close-button" onclick="document.getElementById('myDialog').close()"></span>
        </dialog>

        <div class="container text-center">
            <div class="row">
                <div class="col-md-4">
                    <p>
                        <img th:src="@{${dogdetails.imagePath2}}" alt="${dogdetails.name} - ${dogdetails.queryNumber} sub-image_1" class="img-rounded img-responsive">
                    </p>
                </div>
                <div class="col-md-4">
                    <p>
                        <img th:src="@{${dogdetails.imagePath3}}" alt="${dogdetails.name} - ${dogdetails.queryNumber} sub-image_2" class="img-rounded img-responsive">
                    </p>
                </div>
                <div class="col-md-4">
                    <p>
                        <img th:src="@{${dogdetails.imagePath4}}" alt="${dogdetails.name} - ${dogdetails.queryNumber} sub-image_3" class="img-rounded img-responsive">
                    </p>
                </div>
            </div>
        </div>
        <hr>
        <div class="space-30"></div>
    </div>

    <div class="container text-center">
        <h1>你问店长答</h1>

        <main onclick="mainCLick(event)" style="text-align: left">
            <!-- 添加评论表单 -->
            <form id="commentForm" th:action="@{/insertComment}" method="post">
                <input type="hidden" name="petdetail" th:value="${param.petdetail[0]}" />
                <div class="form-group">
                    <label for="nickname">昵称:</label>
                    <input type="text" class="form-control" id="nickname" name="name" required>
                </div>
                <div class="form-group">
                    <label for="comment">评论:</label>
                    <textarea class="form-control" id="comment" name="comment" rows="3" required></textarea>
                </div>
                <button type="submit" class="btn btn-primary">提交评论</button>
            </form>
            <ul class="comment_ulist" th:each="comment : ${commentList}">
                <li class="comment_line_box">
                    <div class="cmt_img"></div>
                    <div class="cmt_info">
                        <a class="commentator" th:text="${comment.nickname}"></a>
                        <span class="time" th:text="${comment.time}"></span>
                    </div>
                    <div class="cmt_reply">
                    <span>
                        <a class="cmt_reply_btn"></a>
                    </span>
                        <a class="cmt_reply_checker">回复</a>
                    </div>
                    <span>
                    <a style="color:rgba(0,0,0,0.9)" class="thumb_up" th:text="${comment.thumbUpCount}">8</a>
                </span>
                    <div class="comment" th:text="${comment.content}"></div>
                </li>
            </ul>
        </main>
    </div>
    <div class="text-center">
        <p class="coo-text-brown">如果要寻找其他品种的狗狗，请联系赵纬和洪树军。</p>
        <div class="space-30"></div>
            <button name="others" onclick="window.location.href='moredogs.html'" class="btn btn-fill btn-coo-pink btn-tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="back to the search page">回到首页</button>
        <div class="space-30"></div>
    </div>
</div>


<!-- 在<body>标签内，但不在任何脚本之前 -->
<div id="flashMessage" th:text="${message}" style="display:none;"></div>


<div class="parallax-pro">
    <div class="img-src" style="background-image: url('img/image-dogrun2.jpg');"></div>
    <div class="container"><div class="row"><div class="col-md-6 text-center">
        <h3><small>跳转到新青年宠物店媒体官方：</small></h3>
        <p>
            <small>
            </small></p><ul class="list-unstyled"><small>
        <li><a href="https://space.bilibili.com/456611364?spm_id_from=333.1007.0.0" target="_brank">Ai喵咪皇帝</a></li>
        <li><a href="https://space.bilibili.com/456611364?spm_id_from=333.1007.0.0" data-toggle="modal" data-target="#wechatModal">哔哩哔哩</a></li>
        <li><a href="https://space.bilibili.com/456611364?spm_id_from=333.1007.0.0" data-toggle="modal" data-target="#wechatModal">哔哩哔哩</a></li>
        <li><a href="https://space.bilibili.com/456611364?spm_id_from=333.1007.0.0" data-toggle="modal" data-target="#wechatModal">哔哩哔哩</a></li>
    </small></ul><small>
    </small>
        <p></p>
    </div><div class="col-md-6 text-center">
        <h3><small>软件工程项目实践课</small></h3>
        <p>
            <small>
            </small></p><ul class="list-unstyled"><small>
        <li>尊师：田广强</li>
        <li>css样式采用：bootstrap</li>
        <li>图片素材由百度图片提供</li>
        <li>已经将该项目投放gitee，欢迎wink!!!~~~</li>
    </small></ul><small>
    </small>
        <p></p>
    </div></div>
        <div class="space-30"></div><div class="row">

        </div><div class="row">
            <div class="col-md-12 text-center">
                <div class="credits">
                    洪树军和赵纬的大作业新青年宠物销售平台
                </div>
            </div>
        </div></div>
    <!--<audio autoplay loop>
       <source src="/PET_STOREMVC0702_war_exploded/mp3/song.mp3" type="audio/mpeg">
        您的浏览器不支持 HTML5 audio 标签。
    </audio>-->
</div>
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/gsdk-bootstrapswitch.js"></script>
<script src="js/get-shit-done.js"></script>
<script src="js/custom.js"></script>
<script type="text/javascript">

    function handleButtonClick(button) {
        if (button.disabled) {
            alert('已经预约过了，无法再次预约。');
            return false;
        }
        return true;
    }
    document.addEventListener("DOMContentLoaded", function() {
        var flashMessage = document.getElementById('flashMessage').textContent;
        if (flashMessage) {
            alert(flashMessage);
        }
    });
    document.getElementById('open-dialog').addEventListener('click', function() {
        document.getElementById('myDialog').showModal();
    });

    function domById(id) {
        return document.getElementById(id);
    }
    getRandomId = function () {
        return 'id'.concat(Math.floor((Math.random() * 10000000000000000)).toString());
    };
    getCurrentTime = function () {
        return new Date().toLocaleString();
    };

    var curArr = null;

    var commentList = [];

    window.onload = function (ev) {
        // the function will be called at first while page loads
        initTreeComment();
        loadEmoji();
    };

    function loadEmoji() {
        const dom = domById('emoji_board');
        // &#128540;
        const fragment = document.createDocumentFragment();
        let num = 128512;
        for (let i = 0; i < 6; ++i) {
            const p = document.createElement('p');
            p.className = 'emoji_row';
            const pf = document.createDocumentFragment();
            for (let j = 0; j < 9; ++j) {
                const span = document.createElement('span');
                span.className = 'emoji_item'
                span.innerHTML = '&#' + num + ';';
                span.onclick = function () {
                    setEmojiToContent(this.innerText);
                }
                pf.append(span);
                ++num;
            }
            p.appendChild(pf);
            fragment.append(p);
        }
        dom.appendChild(fragment);
    }

    function setEmojiToContent(emo) {
        domById('comment_space').value += emo;
    }

    function emojiTrigger(ev) {
        ev.stopPropagation();
        const dom = domById('emoji_board');
        const block = dom.style.display;
        if (block === 'block') {
            dom.style.display = 'none';
        } else {
            dom.style.display = 'block';
        }
    }

    function login() {
        const commentator = domById('commentator').value.trim();
        if (commentator.length > 0) {
            domById('role_info_name').innerText = commentator;
        }
        initTreeComment();
    }

    /**
     * 初始化评论模块
     */
    initTreeComment = function () {
        const commentView = domById('comment_view');
        if (commentList.length === 0) {
            noComment(commentView)
        } else {
            haveComment(commentView, commentList)
        }
    };

    noComment = function (commentView) {
        commentView.style.textAlign = 'center';
        commentView.innerText = ''
    };

    /**
     * 点击 “提交” 按钮调用的函数
     * @param ev
     */
    function submitTree (ev) {
        const textareaEle = domById('comment_space');
        ev.stopPropagation();
        const text = textareaEle.value;
        const commentator = domById('role_info_name').innerText;

        if (text.length === 0 || commentator === '请先设置您想留言的昵称') {
            alarmIfEmpSpace();
            return;
        }

        let plcHolder = textareaEle.placeholder;

        if(plcHolder.charAt(0) === '回') {
            plcHolder = plcHolder.substring(plcHolder.indexOf(' ') + 1, plcHolder.length)
        } else {
            curArr = commentList;
            plcHolder = "anonymous";
        }

        if (commentator === plcHolder) {
            cancelReply(event, domById('cancel_reply'));
            alert("你不能评论或回复自己!");
            return;
        }

        /*
        * hash表用于保存当前评论的点赞角色名称，默认值位 false
        * */
        const admirers = new Map();
        admirers.set(commentator, false);
        const commentTree = {
            id: getRandomId(),
            commentator: commentator,
            author: plcHolder,
            comment: text,
            time: getCurrentTime(),
            thumbUp: 0,
            admirers: admirers,
            reply: []
        };
        curArr.push(commentTree);
        initTreeComment();
        curArr = null;
        cancelReply(event, domById('cancel_reply'));
    }

    alarmIfEmpSpace = function () {
        alert("The comment content or name are empty！")
    };

    /**
     * 取消回复
     * @param ev 事件
     * @param th 回复按钮自身的 DOM 属性
     */
    function cancelReply (ev, th) {
        ev.stopPropagation();
        th.style.display = 'none';
        domById('comment_space').value = "";
        countTextareaLength();
        fillPlaceholderOfCommentSpace("请输入您要评论的内容");
    }

    /**
     * 计算输入框的内容长度
     */
    function countTextareaLength () {
        const space = domById('comment_space');
        document.getElementById('char_count').innerText = (1000 - space.value.length).toString();
    }

    /**
     * 输入框触发按键事件，并执行相关操作，比如记录输入内容的长度
     * @param ev 事件
     */
    function readKey (ev) {
        const space = domById('comment_space'), len = space.value.length;
        document.getElementById('char_count').innerText = (1000 - len).toString();
        handleCancelButton(space, len > 0 ? 'inline-block' : 'none')
    }

    function handleCancelButton (textArea, status) {
        domById('cancel_reply').style.display = status;
    }

    /**
     * 评论加载
     * @param commentView
     * @param arr
     */
    haveComment = function (commentView, arr) {

        commentView.style.textAlign = 'left';

        let htmlText = '';
        arr.forEach(function (value) {
            htmlText +=
                `<ul id="${value.id}" class="comment_ulist" style="">`+
                `  <li class="comment_line_box" id="${value.id.substring(0, 6)}">` +
                `    <div class="cmt_img">` +
                `    </div>` +
                `    <div class="cmt_info">` +
                `      <a class="commentator">${value.commentator}</a>` +
                `      <span class="time">${value.time}</span>` +
                `   </div>` +
                `   <div class="cmt_reply">` +
                `       <span id="${value.id.substring(0, 9)}">` +
                `           <a class="cmt_reply_btn" id="${value.id.substring(0, 7)}">回复</a>` +
                `       </span>`;

            if(value.reply.length > 0) {
                htmlText += `<a id="${value.id.substring(0, 8)}" class="cmt_reply_checker">查看回复(${value.reply.length})</a>`
            }
            // 初始化当前角色是否给该条留言点赞了
            const commentator = domById('role_info_name').innerText;
            const isAdmirer = value.admirers.get(commentator);
            let color = 'rgba(0,0,0,0.9)';
            if (!isAdmirer) {
                color = 'rgba(0,0,0,0.4)';
            }
            htmlText += "" +
                `   <span>` +
                `       <a style="color:${color}" id="${value.id.substring(0, 10)}" class="thumb_up">${(value.thumbUp > 0 ? value.thumbUp : "")}</a>` +
                `   </span>` +
                `</div>`;
            htmlText += ` <div style="display: block; margin-top: 8px" class="comment">${value.comment}</div>`;
            htmlText += `</li></ul>`;
        });

        commentView.innerHTML = htmlText;

        showButton(arr, 1)
    };

    function thumbUp(value) {
        const dom = domById(value.id.substring(0, 10));
        dom.onclick = function (ev) {
            const cnt = value.thumbUp;
            const commentator = domById('role_info_name').innerText;
            const isAdmired = value.admirers.get(commentator);
            if (!value.admirers.has(commentator)) {
                value.admirers.set(commentator, false);
            }
            if (isAdmired) {
                value.thumbUp -= 1;
                dom.innerText = value.thumbUp === 0 ? '' : (cnt - 1).toString();
                dom.style.color = 'rgba(0,0,0,0.4)';
            } else {
                value.thumbUp += 1;
                dom.innerText = value.thumbUp.toString();
                dom.style.color = 'rgba(0,0,0,0.9)';
            }
            value.admirers.set(commentator, !isAdmired);
            // TODO 发送请求到后端，并更新数据库
            /**
             * @Tip 这里需要注意一点，点赞功能会存在恶意点击的情况，就是用户对当前评论频繁且快速点赞或取消点赞，如果每次点击我们都请求后端更新数据
             * 那么势必会影响服务器的性能，因此我们需要避免这一点，这里不做解释，大家有兴趣可以评论区留言探讨
             */
        }
    }

    showButton = function (arr, sign) {

        arr.forEach(function (value) {

            const parent = domById(value.id);
            const broEle = domById(value.id.substring(0, 6));

            const reply = domById(value.id.substring(0, 7));

            broEle.onmouseover = function (ev) {
                reply.style.display = 'inline-block';
            };

            thumbUp(value);

            reply.onclick = function (ev) {
                ev.stopPropagation();
                curArr = sign === 1 ? value.reply : arr;
                domById('cancel_reply').style.display = 'inline-block';
                const str = "回复 ".concat(value.commentator);
                fillPlaceholderOfCommentSpace(str)
            };

            const replyLen = value.reply.length;
            if (replyLen > 0) {
                handleReply(replyLen, value, broEle, parent);
            }

            broEle.onmouseleave = function (ev) {
                reply.style.display = 'none'
            };
        });
    };

    function handleReply(len, value, broEle, parent) {
        const checkReply = domById(value.id.substring(0, 8));
        checkReply.onclick = (ev) => {
            ev.stopPropagation();
            if(checkReply.innerText.trim().charAt(0) === '查'){
                ifHaveReply(parent, value.reply, broEle);
                checkReply.innerText = "收起回复";
            } else {
                toggleBackReplies(parent);
                checkReply.innerText = "查看回复("+ len +")";
            }
        };
    }

    toggleBackReplies = function (parentTag) {
        const nodes = parentTag.childNodes;
        parentTag.removeChild(nodes[nodes.length - 1]);
    };

    ifHaveReply = function (parentTag, arr, broEle) {
        const li = document.createElement("li");
        li.className = "reply_list";
        li.style.marginLeft = '42px';
        li.style.borderLeft = 'solid 5px lightgray';

        let htmlText = '<ul class="comment_ulist">';

        arr.forEach(function (value) {
            // 初始化当前角色是否给该条留言点赞了
            const commentator = domById('role_info_name').innerText;
            const isAdmirer = value.admirers.get(commentator);
            let color = 'rgba(0,0,0,0.9)';
            if (!isAdmirer) {
                color = 'rgba(0,0,0,0.4)';
            }

            htmlText +=
                `<li class="comment_line_box" id="${value.id.substring(0, 6)}">` +
                `   <div class="cmt_img" style="margin-left: 10px">` +
                `   </div>` +
                `   <div class="cmt_info">` +
                `       <a class="commentator">${value.commentator}</a>` +
                `       <span>回复</span>` +
                `       <a class="author">${value.author}</a>` +
                `       <span class="time">${value.time}</span>` +
                `   </div>` +
                `   <div class="cmt_reply">` +
                `       <span id="${value.id.substring(0, 9)}">` +
                `           <a class="cmt_reply_btn" id="${value.id.substring(0, 7)}">回复</a>` +
                `       </span>` +
                `       <span>` +
                `           <a style="color:${color}" id="${value.id.substring(0, 10)}" class="thumb_up">${(value.thumbUp > 0 ? value.thumbUp : "")}</a>` +
                `       </span>` +
                `   </div>` +
                `   <div class="comment">${value.comment}</div>` +
                `</li>`;
        });
        htmlText += '</ul>';
        li.innerHTML = htmlText;
        parentTag.insertBefore(li, broEle.nextSibling);
        showButton(arr, 2)
    };

    fillPlaceholderOfCommentSpace = function (str) {
        document.getElementById('comment_space').placeholder = str
    };

    mainCLick = function (ev) {
        ev.stopPropagation();
        domById('emoji_board').style.display = 'none';
    };

    function len(id) {
        return domById(id).value.trim().length;
    }


</script>



</body><!-- Mirrored from localhost:8080/PET_STOREMVC0702_war_exploded/dogsDetails.action?petdetail=358 by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 02 Nov 2024 09:42:13 GMT --></html>
</html>